.horoscope {
  padding: 20px;
  min-height: 100vh;
  background-color: #f8f4e8;

  .container {
    max-width: 600px;
    margin: 0 auto;
  }

  .header {
    text-align: center;
    margin-bottom: 30px;

    .title {
      font-size: 24px;
      color: #5a3921;
      margin-bottom: 8px;
    }

    .subtitle {
      font-size: 16px;
      color: #8c7b6b;
    }
  }

  .zodiac-selector {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 20px;

    .zodiac-item {
      background-color: #fff;
      border-radius: 8px;
      padding: 12px;
      text-align: center;
      border: none;
      cursor: pointer;
      transition: all 0.3s;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);

      &.active {
        background-color: #5a3921;
        color: white;
      }

      .zodiac-emoji {
        font-size: 24px;
        margin-bottom: 4px;
      }

      .zodiac-name {
        font-size: 14px;
      }
    }
  }

  .zodiac-detail {
    .zodiac-header {
      display: flex;
      align-items: center;
      padding: 20px;
      margin-bottom: 20px;
      background-color: #fff;
      border-radius: 12px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);

      .zodiac-large-emoji {
        font-size: 48px;
        margin-right: 20px;
      }

      .zodiac-info {
        .zodiac-title {
          font-size: 22px;
          color: #5a3921;
          margin-bottom: 4px;
        }

        .zodiac-date {
          font-size: 14px;
          color: #8c7b6b;
          margin-bottom: 8px;
        }

        .zodiac-attributes {
          display: flex;
          gap: 12px;

          .attribute {
            font-size: 12px;
            color: #8c7b6b;
          }
        }
      }
    }

    .fortune-card {
      padding: 20px;
      margin-bottom: 20px;
      background-color: #fff;
      border-radius: 12px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);

      .card-title {
        font-size: 18px;
        color: #5a3921;
        margin-bottom: 16px;
        padding-bottom: 8px;
        border-bottom: 1px solid #e0d6c8;
      }

      .fortune-text {
        font-size: 14px;
        color: #8c7b6b;
        line-height: 1.6;
        margin-bottom: 20px;
      }

      .fortune-ratings {
        .rating-item {
          display: flex;
          align-items: center;
          margin-bottom: 12px;

          .rating-label {
            width: 80px;
            font-size: 14px;
            color: #5a3921;
          }

          .rating-stars {
            flex: 1;
            .star {
              color: #e0d6c8;
              margin-right: 4px;

              &.active {
                color: #ffc107;
              }
            }
          }
        }
      }
    }

    .compatibility-card {
      padding: 20px;
      background-color: #fff;
      border-radius: 12px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);

      .card-title {
        font-size: 18px;
        color: #5a3921;
        margin-bottom: 16px;
        padding-bottom: 8px;
        border-bottom: 1px solid #e0d6c8;
      }

      .compatibility-content {
        .compatibility-item {
          margin-bottom: 16px;

          .compatibility-label {
            font-size: 16px;
            color: #5a3921;
            margin-bottom: 12px;
          }

          .compatibility-signs {
            display: flex;
            gap: 16px;

            .compatibility-sign {
              flex: 1;
              text-align: center;
              background-color: #f9f5eb;
              border-radius: 8px;
              padding: 12px;

              .sign-emoji {
                font-size: 24px;
                margin-bottom: 4px;
              }

              .sign-name {
                font-size: 14px;
                color: #5a3921;
              }
            }
          }
        }
      }
    }
  }
}